<link rel="stylesheet" href="./demo.css">

<div class="box enlarge1">
    <div class="img">
        <div class="mask"></div>
    </div>
    <ul>
        <li class="active" imgName="1">
            <img src="./imgs/1.small.jpg" alt="">
        </li>
        <li imgName="2">
            <img src="./imgs/2.small.jpg" alt="">
        </li>
    </ul>
    <div class="enlarge"></div>
</div>

<br><br>
<hr>
<br><br>

<div class="box enlarge2">
    <div class="img">
        <div class="mask"></div>
    </div>
    <ul>
        <li class="active" imgName="1">
            <img src="./imgs/1.small.jpg" alt="">
        </li>
        <li imgName="2">
            <img src="./imgs/2.small.jpg" alt="">
        </li>
    </ul>
    <div class="enlarge"></div>
</div>

<script src="./demo.js"></script>
<script>
let enlarge1 = new Enlarge('.enlarge1',{
    maskBg:'yellow',
    maskXz:'50%',
})
let enlarge2 = new Enlarge('.enlarge2',{
    maskBg:'blue',
    maskXz:'none',
})
</script>